<template>
  <div>
    <h1 ref="h1">生命周期</h1>
    {{ count }}
    <button @click="count++">+1</button>
  </div>
</template>


<script>
export default {
  data() {
    return {
      count: 1
    };
  },
  // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  beforeCreate() {
    console.group();
    console.log(this.count);
    console.log(this.$refs.h1);
    console.groupEnd();
  },
  // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：
  // 数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。
  // 一般再这里 发送 ajax
  created() {
    console.group();
    console.log(this.count);
    console.log(this.$refs.h1);
    console.groupEnd();
  },
  // 在挂载开始之前被调用：相关的 render 函数首次被调用。
  beforeMount() {
    console.group();
    console.log(this.count);
    console.log(this.$refs.h1);
    console.groupEnd();
  },
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
  //  一般发起 ajax 
  // 可以进行dom操作
  mounted() {
    console.group();
    console.log(this.count);
    console.log(this.$refs.h1);
    console.groupEnd();
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前。
  beforeUpdate() {
    console.group();
    console.log('beforeUpdate');
    console.groupEnd();
  },
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  updated() {
    console.group();
    console.log('updated');
    console.groupEnd();
  },
  // 实例销毁之前调用。在这一步，实例仍然完全可用。
  beforeDestroy() {},
  // 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
  destroyed() {}
};
</script>